import React, { Component } from 'react'
import { FormattedMessage, FormattedNumber } from 'react-intl'
import { Button } from 'antd-mobile'
import { DataInfor } from './'



export default class Data extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div className="rt-databox">
        <div className="rt-tody">
          <div>
            <FormattedMessage
              id='today'
            />
          </div>
          <div>
            <span>
              <div>+0.19%</div>
            </span>
            <span>
              <div></div>
            </span>
            <span>1.10175</span>
          </div>
        </div>    
        <div className="daybox">
            <div className="-hight-box">
              <div>
                <FormattedMessage
                  id='minimum'
                />
              ：<span className="-number">1.10134</span></div>
              <div>
                <FormattedMessage
                  id='highest'
                />
              ：<span className="-number">1.10134</span></div>
            </div>
            <div className="-line">
              <div className="float" style={{left:'60%'}}></div>
              <div></div>
            </div>
        </div>
        <div className="daybox">
            <div className="-sell-box">
              <div>
                <FormattedMessage
                  id='seller'
                />
              ：<span className="-number">26%</span></div>
              <div>
                <FormattedMessage
                  id='buyers'
                />
              ：<span className="-number">74%</span></div>
            </div>
            <div className="-line-two">
              <div className="-freen">
                <div className="-red" style={{width:'40%'}}></div>
              </div>
              
            </div>
        </div>
        <div className="rt-change">
          <p>
            <FormattedMessage
              id='change'
            />
          </p>
          <ul>
            <li className="time-change">
              <div>
                <span className="over">
                  <FormattedMessage
                    id='day'
                  />
                </span>
                <div>+0.19%</div>
              </div>
              <div>
                <span className="over">
                  <FormattedMessage
                    id='week'
                  />
                </span>
                <div>+0.19%</div>
              </div>
              <div>
                <span className="over">
                  <FormattedMessage
                    id='month'
                  />
                </span>
                <div>+0.19%</div>
              </div>
            </li>
            <li className="time-change">
              <div>
                <span className="over">
                  <FormattedMessage
                    id='season'
                  />
                </span>
                <div className="-active">-0.19%</div>
              </div>
              <div>
                <span className="over">
                  <FormattedMessage
                    id='halfayear'
                  />
                </span>
                <div className="-active">-0.19%</div>
              </div>
              <div>
                <span className="over">
                  <FormattedMessage
                    id='year'
                  />
                </span>
                <div className="-active">-0.19%</div>
              </div>
            </li>
          </ul>
          <DataInfor present={this.props.present}/>

        </div>
      </div>
      
    )
  }
}